<template>
  <div class="sysmenu-container">
    <!--    查询表单-->
    <Search :SearchConfig="SearchConfig" :searchData="searchData">
      <template #buttons>
        <ButtonGroup :ButtonConfig="ButtonConfig" @reset="reset" @query="query" @openDialog="openDialog"/>
      </template>
    </Search>
    <!--    数据网格-->
    <div class="data-grid">
      <el-table
          :data="gridData"
          :highlight-current-row="true"
          border
          height="490px"
          style="width: 100%">
        <el-table-column
            type="index"
            fixed
            label="序号"
        >
        </el-table-column>

        <el-table-column
            prop="menuId"
            label="菜单ID"
        >
        </el-table-column>

        <el-table-column
            prop="parentId"
            label="父级菜单ID"
        >
        </el-table-column>

        <el-table-column
            prop="name"
            label="菜单名"
        >
        </el-table-column>

        <el-table-column
            prop="url"
            label="后端路径"
        >
        </el-table-column>

        <el-table-column
            prop="routeUrl"
            label="路由路径"
        >
        </el-table-column>

        <el-table-column
            label="菜单类型"
        >
          <template slot-scope="scope">
            {{scope.row.type | getDictLabel(dicts['sys_menu_type'])}}
          </template>
        </el-table-column>

        <el-table-column
            prop="icon"
            label="图标"
        >
        </el-table-column>

        <el-table-column
            prop="orderNum"
            label="排序"
        >
        </el-table-column>

        <el-table-column
            prop="createUserName"
            label="创建者"
        >
        </el-table-column>

        <el-table-column
            prop="createTime"
            label="创建时间"
        >
        </el-table-column>

        <el-table-column
            prop="updateTime"
            label="更新时间"
        >
        </el-table-column>

        <el-table-column
            prop="permission"
            label="权限标识"
        >
        </el-table-column>

        <el-table-column
            label="是否启用"
        >
          <template slot-scope="scope">
            {{scope.row.enable | getDictLabel(dicts['common_yes_no'])}}
          </template>
        </el-table-column>

        <el-table-column
            label="是否外链">
          <template slot-scope="scope">
            {{scope.row.isLink | getDictLabel(dicts['common_yes_no'])}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    分页工具-->
    <page-comp :pageOptions="pageOptions"/>

    <!--    对话框-->
    <MenuAddOrUpdateDialog :options="addOrUpdateDialogOptions" @closeDialog="closeAddOrUpdateDialog"/>
  </div>
</template>

<script>
import PageComp from '@/components/pagination'
import Search from '@/components/search/index'
import ButtonGroup from '@/components/ButtonGroup'
import MenuAddOrUpdateDialog from "@/components/system/auth/MenuAddOrUpdateDialog.vue";
import {list} from "@/api/sysmenuApi";
import {SearchConfig,ButtonConfig,getAllDirectory,init} from "@/views/auth/sysmenu.config";

export default {
  name: 'User',
  components: {PageComp, Search,ButtonGroup,MenuAddOrUpdateDialog},
  dicts: ['sys_menu_type','common_yes_no'],
  data() {
    return {
      pageOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pagesizes: [10, 20, 30, 40],
        sizeChangeCallback(pageSize) {
          this.pageSize = pageSize
        },
        currentChangeCallback(currPage) {
          this.currentPage = currPage
        }
      },
      gridData: [],
      searchData: {
        parentId: null,
        name: '',
        type: null,
        isLink: null
      },
      SearchConfig,
      ButtonConfig,
      addOrUpdateDialogOptions: {
        isVisitable: false,
        title: ''
      }
    }
  },
  watch: {
    'pageOptions.currentPage': function (ne,old) {
      this.query()
    },
    'pageOptions.pageSize': function (ne,old){
      this.query()
    }
  },
  methods: {
    query() {
      list(this.searchData,this.pageOptions.currentPage,this.pageOptions.pageSize).then(success => {
        this.gridData = success.data
        this.pageOptions.total = success.total
      })
    },
    openDialog(val) {
      this.addOrUpdateDialogOptions.isVisitable = true
      if (val === '1') {
        // 添加
        this.addOrUpdateDialogOptions.title = '添加'
      } else if (val === '0') {
        // 编辑
        this.addOrUpdateDialogOptions.title = '编辑'
      }
    },
    reset() {
      this.searchData = {}
    },
    closeAddOrUpdateDialog() {
      this.addOrUpdateDialogOptions.isVisitable = false
      this.addOrUpdateDialogOptions.title = ''
    }
  },
  mounted() {
    list().then(success => {
      this.gridData = success.data
      this.pageOptions.total = success.total
    })
    getAllDirectory()

    // 这里定时的原因是dicts在组件created时异步获取的数据，虽然mounted在created之后执行
    // 但是由于异步，有可能mounted的时候dicts任然没有值，所以要设置延迟，要么改成同步获取数
    // 据，即设置axios的异步属性为false
    setTimeout(() => {
      init(this.dicts)
    },800)
  }
}
</script>

<style scoped>
.sysmenu-container {
  position: relative;
  height: calc(100% - 31px);
}

.sysmenu-container > .data-grid {
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
}
</style>